<template>
    <a-modal
      :bodyStyle="bodyStyle"
      :title="title"
      :visible="visible"
      :confirmLoading="confirmLoading"
      :destroyOnClose="true"
      :maskClosable="false"
      @ok="handleOk"
      @cancel="handleCancel"
    >
      <a-form layout='vertical' :form="form">
        <a-form-item  class="a-form-item" v-bind="formItemLayout" label="资源名称">
          <a-input
            v-decorator="[
              'resourcename',
              {
                rules: [{ required: true, message: '请输入资源名称!' }],
              }
            ]"
            placeholder="请输入资源名称"
          />
        </a-form-item>
        <a-form-item  class="a-form-item" v-bind="formItemLayout" label="资源KEY">
          <a-input
            v-decorator="[
              'resourceKey',
              {
                rules: [{ required: true, message: '请输入资源KEY!' }],
              }
            ]"
            placeholder="请输入资源KEY"
          />
        </a-form-item>
        <a-form-item  class="a-form-item" v-bind="formItemLayout" label="资源url">
          <a-input
            v-decorator="[
              'resourceUrl',
              {
                rules: [{ required: false, message: '请输入资源url!' }],
              }
            ]"
            placeholder="请输入资源url"
          />
        </a-form-item>
        <a-form-item class="a-form-item" v-bind="formItemLayout" label="资源类型">
          <a-radio-group v-decorator="['type']">
            <a-radio :value="1">
              菜单
            </a-radio>
            <a-radio :value="2">
              按钮
            </a-radio>
            <a-radio :value="3">
              数据
            </a-radio>
          </a-radio-group>
        </a-form-item>
        <a-form-item  class="a-form-item" v-bind="formItemLayout" label="描述">
          <a-input
            v-decorator="[
              'description',
              {
                rules: [{ required: false, message: '请输入描述!' }],
              }
            ]"
            placeholder="请输入描述"
          />
        </a-form-item>
        <a-form-item  :class="{'a-form-item':true}" v-bind="formItemLayout" label="上级资源">
          <a-tree-select
            showSearch
            allowClear
            :treeData="treeData"
            :value="parentId"
            @change="onChange"
            :dropdownStyle="{ maxHeight: '400px', overflow: 'auto' }"
            searchPlaceholder="Please select"
          />
        </a-form-item>
        <a-form-item class="a-form-item" v-bind="formItemLayout" label="状态">
          <a-checkbox
            :checked="disabled"
            @change="onChangeDisabled"
            v-decorator="[
              'disabled',
              {
                rules: [{ required: false }],
              }
            ]"
          >禁用</a-checkbox>
        </a-form-item>
        <a-form-item>
          <a-input type="hidden" v-decorator="['id', {}]"/>
        </a-form-item>
      </a-form>
    </a-modal>
</template>
<script>
import Vue from 'vue'
import serv from './ResourceService'
import { Form, Upload, Checkbox, Input, Modal, Radio } from 'ant-design-vue'

Vue.component(Radio.name, Radio)
Vue.component(Radio.Group.name, Radio.Group)
Vue.component(Form.name, Form)
Vue.component(Form.Item.name, Form.Item)
Vue.component(Upload.name, Upload)
Vue.component(Checkbox.name, Checkbox)
Vue.component(Input.name, Input)
Vue.component(Modal.name, Modal)
export default {
  beforeCreate () {
    this.form = this.$form.createForm(this)
  },
  created () {

  },
  data () {
    return {
      confirmLoading: false,
      formItemLayout: {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 4 }
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 20 }
        }
      },
      bodyStyle: { height: 400 },
      loading: false,
      disabled: false,

      treeData: [],
      parentId: undefined
    }
  },
  props: {
    title: {
      type: String,
      required: true
    },
    visible: {
      type: Boolean,
      default: false
    },
    record: {
      type: Object,
      default () {
        return {}
      }
    }
  },
  watch: {
    visible: function (nvalue) {
      !nvalue || this.getTree()
      if (nvalue && Object.keys(this.record).length > 0) {
        setTimeout(() => {
          this.form.setFieldsValue(this.record)
          this.parentId = this.record && this.record.parent ? this.record.parent.id : undefined
        }, 10)
        this.disabled = this.record.disabled === 1
      } else {
        this.parentId = undefined
        this.disabled = false
      }
    }
  },
  methods: {
    handleOk () {
      const form = this.form
      form.validateFields((err, values) => {
        if (err) {
          return
        }
        values.disabled = values.disabled ? 1 : 0
        values.parentId = this.parentId
        // let formData = new FormData()
        // for (let key in values) {
        //   let value = values[key]
        //   if (value) formData.append(key, value.file ? value.file : value)
        // }
        // formData.append('parentId', this.parentId)
        this.confirmLoading = true
        serv.save(values).then(res => {
          this.confirmLoading = false
          if (res.data.code === 0) {
            form.resetFields()
            this.$emit('ok', values.id)
          } else {
            this.$message.error(res.data.msg)
          }
        })
      })
    },
    handleCancel (e) {
      this.$emit('cancel')
    },
    onChangeDisabled (e) {
      this.disabled = e.target.checked
    },
    onChange (value) {
      this.parentId = value
    },
    async getTree () {
      this.treeData = await serv.getTree()
    }
  }
}
</script>

<style scoped>
img {
  max-width: 100%;
}

.a-form-item {
  margin-bottom: 0px;
}
</style>
